<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
    <title>瓜果超市</title>
</head>

<body>
    <div id="app">
        <el-input placeholder="请输入内容" v-model="search" class="input-with-select"  @change="changeHandler">
            <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
        <el-radio-group v-model="category" @change="getData">
            <el-radio-button v-for="v in categorys" :label="v" :key="v">{{v}}</el-radio-button>
        </el-radio-group>
        <el-table :data="fruits" style="width: 100%">
            <el-table-column prop="name" label="名称" width="180">
            </el-table-column>
            <el-table-column prop="price" label="价格" width="180">
            </el-table-column>
            <el-table-column prop="category" label="种类">
            </el-table-column>
        </el-table>
        <el-pagination layout="prev, pager, next" @current-change="currentChange" :total="total">
        </el-pagination>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                page: 1,
                total: 0,
                fruits: [],
                categorys: [],
                category: [],
                search:''
            },
            created() {
                this.getData()

                this.getCategory()
            },
            methods: {
                async currentChange(page) {
                    this.page = page;
                    await this.getData()
                },
                async changeHandler(val){
                    console.log('search...',val)
                    this.search = val
                    await this.getData()
                },
                async getData() {
                    const res = await axios.get(`/api/list?page=${this.page}&category=${this.category}&keyword=${this.search}`)
                    const data = res.data.data
                    this.fruits = data.fruits
                    this.total = data.pagination.total
                },
                async getCategory() {
                    const res = await axios.get(`/api/category`)
                    this.categorys = res.data.data
                    console.log('category', this.categorys)
                }
            }
        });
    </script>
</body>

</html>